<template>
    <div class="case-process">
        <el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
            <el-form-item label="案件状态" prop="status">
                <el-select v-model="form.status" placeholder="请选择处理状态">
                    <el-option label="处理中" value="处理中" />
                    <el-option label="已处理" value="已处理" />
                    <el-option label="已撤销" value="已撤销" />
                </el-select>
            </el-form-item>

            <el-form-item label="处罚方式" prop="penalty" v-if="form.status === '已处理'">
                <el-select v-model="form.penalty" placeholder="请选择处罚方式">
                    <el-option label="警告" value="警告" />
                    <el-option label="罚款" value="罚款" />
                    <el-option label="扣分" value="扣分" />
                    <el-option label="罚款+扣分" value="罚款+扣分" />
                </el-select>
            </el-form-item>

            <el-form-item label="罚款金额" prop="fineAmount" v-if="form.penalty && form.penalty.includes('罚款')">
                <el-input-number v-model="form.fineAmount" :min="0" :step="100" controls-position="right" />
                <span class="unit">元</span>
            </el-form-item>

            <el-form-item label="扣分数" prop="points" v-if="form.penalty && form.penalty.includes('扣分')">
                <el-input-number v-model="form.points" :min="1" :max="12" controls-position="right" />
                <span class="unit">分</span>
            </el-form-item>

            <el-form-item label="处理意见" prop="comments">
                <el-input v-model="form.comments" type="textarea" :rows="4" placeholder="请输入处理意见" maxlength="500"
                    show-word-limit />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm">提交处理</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>

        <div class="case-evidence" v-if="caseData.evidenceImages">
            <h4>证据材料</h4>
            <div class="evidence-grid">
                <el-image v-for="(img, index) in caseData.evidenceImages" :key="index" :src="img"
                    :preview-src-list="caseData.evidenceImages" fit="cover" class="evidence-img" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
    caseData: {
        type: Object,
        required: true,
        default: () => ({})
    }
})

const emit = defineEmits(['submit', 'cancel'])

const formRef = ref(null)
const form = reactive({
    status: '处理中',
    penalty: '',
    fineAmount: 200,
    points: 3,
    comments: ''
})

const rules = {
    status: [{ required: true, message: '请选择处理状态', trigger: 'change' }],
    penalty: [{ required: true, message: '请选择处罚方式', trigger: 'change' }],
    comments: [
        { required: true, message: '请输入处理意见', trigger: 'blur' },
        { min: 10, message: '处理意见不能少于10个字', trigger: 'blur' }
    ]
}

// 初始化表单数据
watch(() => props.caseData, (newVal) => {
    if (newVal.status) {
        form.status = newVal.status
    }
    if (newVal.processOpinion) {
        form.comments = newVal.processOpinion
    }
}, { immediate: true })

const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            emit('submit', {
                status: form.status,
                penalty: form.penalty,
                fineAmount: form.fineAmount,
                points: form.points,
                comments: form.comments
            })
        }
    })
}

const cancel = () => {
    emit('cancel')
}
</script>

<style scoped>
.case-process {
    padding: 20px;
}

.unit {
    margin-left: 10px;
    color: #666;
}

.case-evidence {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.case-evidence h4 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
}

.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.evidence-img {
    width: 100%;
    height: 120px;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.3s;
}

.evidence-img:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>